<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<title>Kalendae Date picker Demo by GBin1.com</title>
	<meta name="description" content="Javascript date picker - Kalendae" />
	<meta name="keywords" content="js date picker, javascript date picker, kalendae"/>
	<link rel="stylesheet" href="../../../../../../Personal/Downloads/demo/css/kalendae.css" type="text/css" charset="utf-8">
	<script src="../../../../../../Personal/Downloads/demo/js/kalendae.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
		body{
			background: #202020;
			color: #CCC;
		}
		
		.kalendae .k-days span.closed {
			background:red;
		}
	</style>
</head>
<body>
	<h1>Kalendae Date Picker Demo</h1>
	<p>Single Select</p>
	<script type="text/javascript" charset="utf-8">
		new Kalendae(document.body, {
			months:1,
			mode:'single',
			selected:Kalendae.moment().subtract({M:1})
		});

		new Kalendae({
			attachTo:document.body,
			months:2,
			mode:'single',
			selected:Kalendae.moment().subtract({M:1})
		});
		
		new Kalendae({
			attachTo:document.body,
			months:3,
			mode:'single',
			selected:Kalendae.moment().subtract({M:1})
		});
	</script>
		
	<p>Range Select</p>	
	<script type="text/javascript" charset="utf-8">
		new Kalendae(document.body, {
			months:1,
			mode:'range',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});

		new Kalendae({
			attachTo:document.body,
			months:2,
			mode:'range',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});
		
		new Kalendae({
			attachTo:document.body,
			months:3,
			mode:'range',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});
	</script>

	<p>Multi-Select</p>
	<script type="text/javascript" charset="utf-8">
		new Kalendae(document.body, {
			months:1,
			mode:'multiple',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});

		new Kalendae({
			attachTo:document.body,
			months:2,
			mode:'multiple',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});
		
		new Kalendae({
			attachTo:document.body,
			months:3,
			mode:'multiple',
			selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
		});
		

	</script>

	<hr>
	<p>Blackout and Direction Tests</p>
	
	<script type="text/javascript" charset="utf-8">
		//direction
		new Kalendae(document.body, {
			months:3,
			direction:'future'
		});

		//direction
		new Kalendae(document.body, {
			months:3,
			direction:'past'
		});

		//blackout
		new Kalendae(document.body, {
			blackout: function (date) {
				return Kalendae.moment(date).date() % 2; //blackout every other day
			}
		});

		//blackout AND direction
		new Kalendae(document.body, {
			direction:'future',
			blackout: function (date) {
				return [1,0,0,0,0,0,1][Kalendae.moment(date).day()]; //blackout weekends
			}
		});
				
	</script>



	<hr>
	<p>Class Map Test</p>
	
	<script type="text/javascript" charset="utf-8">
		//direction
		var classMap = [];
			classMap[ Kalendae.moment().add({d:5}).format('YYYY-MM-DD') ] = 'closed';
			
		new Kalendae(document.body, {
			dateClassMap: classMap
		});
	</script>
	<hr>

	Click this input element: <input type="text" value="2/16/2012" id="input1">
	<script type="text/javascript" charset="utf-8">
		var k4 = new Kalendae.Input('input1', {
			months:2
		});
	</script>
	
	<hr>
	This calendar is auto-created.
	<div class="auto-kal"></div>
	
	<hr>
	So is the one on this input.
	<input type="text" class="auto-kal">
	
	<div style="padding: 200px"></div>
</body>
</html>